Reactアプリにコード自動整形ツールのPrettierを導入する

Reactアプリにコード自動整形ツールのPrettierを導入する方法についてご紹介します。

事前準備

Reactアプリを用意します。今回は以下の記事でご紹介、作成したReactアプリを使用したいと思います。

• Create React Appで作成したReactアプリにReact Native for Webを導入する

Prettierを導入する

まず、公式ドキュメントの手順に沿ってインストールします。

$ yarn add prettier --dev --exact

実行後にpackage.jsonを開き、以下のように追加されているか確認しましょう。

  "devDependencies": {
    "prettier": "1.19.1"
  }

次に、package.jsonのscriptsにPrettierを実行するコマンドを定義します。 今回は、実行コマンドの名称をformatとしました。

  "scripts": {
    "format": "prettier --write ./src/**/*.{ts,tsx}"
  },

これでyarn formatを実行すると、srcフォルダ内の.tsファイル、.tsxファイルのコードが自動整形されるようになりました。

最後にPrettierの設定ファイルを作成し、プロジェクトに追加します。

Prettierの設定ファイルを.prettierrcという名称で作成し、package.jsonと同じ階層に配置しました。 設定ファイルの詳細についてはこちらのページを参照してください。

今回は以下の通りJSON形式で設定しました。

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

末尾のコンマ、タブの文字数、セミコロンの可否、シングルクォートの可否のオプションを指定しています。

その他指定できるオプションについてはこちらのページを参照してください。

設定ファイルの内容でコードが自動整形されるか確認する

yarn formatを実行します。

$ yarn format

srcフォルダ内のファイルのコードが設定ファイル.prettierrcの設定の通りに自動整形されるか確認しましょう。

実行前

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

App.tsx

import React from "react";
import { View, Text } from "react-native";

function App() {
  return (
    <View>
      <Text>Hello React Native for Web!</Text>
    </View>
  );
}

export default App;

実行後

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

App.tsx

import React from 'react'
import { View, Text } from 'react-native'

function App() {
  return (
    <View>
      <Text>Hello React Native for Web!</Text>
    </View>
  )
}

export default App

末尾のセミコロンが除去され、ダブルクォートがシングルクォートに変更されたのが確認できたら成功です！ 上記の２ファイルの他にsrcフォルダ内にファイルがあれば、そちらのコードも自動整形されていると思います。

まとめ

Reactアプリにコード自動整形ツールのPrettierを導入する方法をご紹介しました。Prettierを単独で導入することは少ないかもしれませんが、この記事がどなたかのお役に立てば幸いです。